<template>
    <div>
        <el-card>
            <template #header>
                <div>
                    <el-form :model="formData" ref="form" label-width="80px" :inline="false">
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="领料编码">
                                    <el-input style="width: 250px;" placeholder="请输入领料编码"
                                        v-model="formData.requisitionCode" readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="0">
                                <el-form-item label="领料名称">
                                    <el-input style="width: 350px;" v-model="formData.requisitionName"
                                        readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="需求日期">
                                    <el-date-picker style="width: 350px;" type="date" placeholder="选择日期"
                                        v-model="formData.requiredTime" readonly></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12" :offset="0">
                                <el-form-item label="领料仓库">
                                    <el-input v-model="formData.warehouseName" placeholder="请选择仓库" style="width: 350px;"
                                        disabled></el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="选择计划">
                                    <el-input style="width: 350px;" v-model="formData.planCode" placeholder="请选择计划"
                                        readonly></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="0">
                                <el-form-item label="选择计划">
                                    <el-input style="width: 350px;" v-model="formData.planName" placeholder="请选择计划"
                                        readonly></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20">
                            <el-col :span="12" :offset="0">
                                <el-form-item label="客户编号" prop="customerCode">
                                    <el-input style="width: 350px;" disabled placeholder="请选择客户"
                                        v-model="formData.customerResourcesId"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :offset="0">
                                <el-form-item label="客户名称" prop="customerName">
                                    <el-input style="width: 350px;" disabled placeholder="请选择客户"
                                        v-model="formData.customerResourcesName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="物料清单">
                                    <el-table :data="materialList" style="width: 100%" border>
                                        <el-table-column prop="materialId" label="物料编码" />
                                        <el-table-column prop="materialName" label="物料名称" />
                                        <el-table-column prop="specificationsAndModels" label="规格型号" />
                                        <el-table-column prop="unit" label="单位" width="80" />
                                        <el-table-column prop="planQuantity" label="计划数量" />
                                        <!-- <el-table-column prop="inventoryQuantity" label="库存数量" /> -->
                                        <el-table-column prop="actualQuantity" label="实发数量" />
                                    </el-table>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <!-- card body -->
        </el-card>
    </div>
</template>

<script setup>
import { ref, defineEmits, onMounted, defineProps } from 'vue';
import request from '@/api/request.js'
import { useRouter } from 'vue-router'

let router = useRouter()
let emits = defineEmits(['ref-table'])
let props = defineProps(["data"])


const loadData = () => {
    request({
        url: '/material-requisition/getMaterialByCode',
        method: 'get',
        params: {
            requisitionCode: props.data.requisitionCode
        }
    }).then(res => {
        console.log(res.data)
        materialList.value = res.data
    })
}
loadData()


// 物料列表
let materialList = ref([])

// 计划列表
let formData = ref({ ...props.data })


let submitForm = () => {
    router.push('/production/material')

    emits("ref-table")
    ElMessage.success('测试数据提交成功')
}

// 初始化数据
onMounted(() => {
    // 可以在这里添加初始化数据的逻辑
    // 例如获取仓库列表、默认值等
    loadData()
})
</script>

<style scoped></style>